<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>医生板块</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style scoped>
        #app {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .custom-steps {
            font-size: 12px;
        }

        .custom-steps .el-step__title {
            font-size: 12px;
        }

        .custom-steps .el-step__icon i {
            font-size: 12px !important;
        }

        .el-aside {
            flex: 0 0 auto;
            width: 200px;
            background-color: #f0f0f0;
            display: flex;
            flex-direction: column;
        }

        .menu {
            flex: 1;
        }

        .el-header {
            background-color: #3674C5;
            color: #fff;
            padding: 20px;
        }
        .system-title{
            font-size: 24px;
            font-weight: bold;
        }
        .custom-header {
            padding: 13px 10px;
        }
        .custom-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        .table-header {
            display: flex;
            align-items: center;
        }

        .search-container {
            margin-left: auto;
            display: flex;
        }

        .search-input {
            margin-right: 10px;
        }
        .delete-button {
            margin-right: 10px;
            color: red;
        }


        .recharge-button {
            color: dodgerblue;
        }
        .custom-main {
            display: flex;
        }

        .main-container {
            display: flex;
            height: 100%;
            width: 100%;
        }

        .left-half {
            flex: 1;
            /* 左半部分的样式 */
        }

        .right-half {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
            /* 右半部分的样式 */
        }

        .card-container {
            flex: 1;
        }

        .card-content {
            height: 100%;
            padding: 20px;
            /* 卡片内容的样式 */
        }
        .slide-fade-enter-active,
        .slide-fade-leave-active {
            transition: opacity 0.5s ease;
        }

        .slide-fade-enter,
        .slide-fade-leave-to {
            opacity: 0;
        }
        .header-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .left-content {
            flex: 1;
        }

        .right-content {
            margin-left: auto;
        }
        .button-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .left-button {
            margin-right: 10px;
        }

        .right-button {
            margin-left: auto;
        }
        .success-button{
            color: limegreen;
        }
        #dialogSpan{
            display: inline-block;
            width: 200px;
            height: 200px;
            position: absolute;
            top: 80px;
            right: 27px;
            opacity:0.9;
            background-color: #FFFFFF;
        }
        #dialogSpan2{
            display: inline-block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 124px;
            right: 80px;
            font-size: 20px;
            text-align: center;
        }
        .qrcode-wrapper {
            position: relative; /* 确保包裹器相对定位 */
        }

        .success-message {
            /* 在 qrcode-wrapper 内部绝对定位成功提示信息 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 在 qrcode-wrapper 内部居中显示信息 */
            z-index: 2; /* 确保信息显示在背景的上方 */
            display: none; /* 初始隐藏支付成功提示信息 */
        }

        .transparent-bg {
            /* 设置透明白色背景样式 */
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 0.9); /* 设置白色背景透明度 */
            width: 100%;
            height: 100%;
            z-index: 1; /* 确保透明白色背景在二维码上方 */
            display: none; /* 初始隐藏透明白色背景 */
            pointer-events: none; /* 确保透明背景不遮挡二维码的交互 */
        }

        .el-result-inline .el-result__title {
            /* 成功提示信息中的标题样式 */
            display: inline-block; /* 设置为行内块元素，以便在同一行显示 */
            margin-left: 25px; /* 为标题添加一些间距 */
            max-width: 150px; /* 设置最大宽度，避免挤到下一行 */
            white-space: nowrap; /* 禁止文字换行 */
            overflow: hidden; /* 隐藏超出长度的部分 */
            text-overflow: ellipsis; /* 超出长度时显示省略号 */
        }
        .avatar-uploader {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px dashed #ccc;
            border-radius: 4px;
            overflow: hidden;
            text-align: center;
        }

        .avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            margin-top: 32px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="paymentFormContainer"></div>
    <el-container>
        <el-header class="custom-header">
         <div class="header-content">
              <span class="system-title">医院预约挂号系统</span>
         </div>
            <div style="float: right;margin-top: -30px;margin-right: 120px">
                <span class="welcome" >欢迎回来！</span>
                <el-dropdown @command="handleCommandAV">
                    <el-avatar size="medium" :src="currentUserAvatar" style="height: 40px" ></el-avatar>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-plus" command="openEditInfoDialog">信息更改</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-plus" divided command="openLogoutConfirm">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <el-dialog
                    title="个人资料修改"
                    :visible.sync="showEdit"
                    width="30%"
                    @close="closeEditInfoDialog"
            >
                <el-form label-width="80px">
                    <!-- 添加用于修改账号密码的表单字段 -->
                    <el-form-item label="新密码：">
                        <el-input type="password" v-model="newPassword" placeholder="请输入新密码"></el-input>
                    </el-form-item>
                    <el-form-item label="再次输入密码：">
                        <el-input type="password" v-model="confirmNewPassword" placeholder="请输入新密码"  :class="{ 'is-error': passwordMismatch }"></el-input>
                    </el-form-item>
                    <!-- 添加用于修改电话的表单字段 -->
                    <el-form-item label="新电话：">
                        <el-input type="text" v-model="from.newPhone" placeholder="请输入新手机号"></el-input>
                    </el-form-item>
                    <!-- 添加显示验证码的区域 -->
                    <el-form-item label="验证码：">
                        <el-input v-model="enteredCode" placeholder="请输入验证码"></el-input>
                        <el-button @click="generateVerificationCode">获取验证码</el-button>
                    </el-form-item>

                    <!-- 添加用于修改邮箱的表单字段 -->
                    <el-form-item label="邮箱：">
                        <el-input v-model="newEmail" placeholder="请输入新邮箱"></el-input>
                    </el-form-item>
                    <!-- 添加用于重新上传头像的表单字段 -->
                    <el-form-item label="头像：">
                        <el-upload
                                class="avatar-uploader"
                                :action="uploadUrl"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                                :headers="headers"
                        >
                            <img v-if="currentUserAvatar" :src="currentUserAvatar" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
        <el-button @click="closeEditInfoDialog">取消</el-button>
        <el-button type="primary" @click="performUpdater">确认更新</el-button>
      </span>
            </el-dialog>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        v-model="selectedDoctorIndex"
                        @select="handleMenuDoctorSelect"
                        default-active="1"
                        class="menu"
                        router
                        :collapse="isDoctorCollapse"
                        :collapse-transition="false"
                        :unique-opened="true"
                        :default-openeds="defaultDectorOpeneds"
                >
                  <!--  <el-menu-item index="1">
                        <i class="el-icon-s-home"></i>
                        <span class="menu-item-text">首页</span>
                    </el-menu-item>-->
                    <el-menu-item index="2">
                        <i class="el-icon-user"></i>
                        <span class="menu-item-text">医生信息</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-office-building"></i>
                        <span class="menu-item-text">科室信息</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-notebook-2"></i>
                        <span class="menu-item-text">药品信息</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="el-icon-date"></i>
                        <span class="menu-item-text">预约管理</span>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <i class="el-icon-s-data"></i>
                        <span class="menu-item-text">就诊记录</span>
                    </el-menu-item>
                    <el-menu-item index="7">
                        <i class="el-icon-receiving"></i>
                        <span class="menu-item-text">处方信息</span>
                    </el-menu-item>
                    <el-menu-item index="8">
                        <i class="el-icon-chat-dot-round"></i>
                        <span class="menu-item-text">留言反馈</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main class="custom-main">
               <!-- <div v-show="selectedDoctorIndex === '1'" style="width: 100%">
                    <el-row>
                        &lt;!&ndash; 左边占四分之三 &ndash;&gt;
                        <el-col :span="18">
                            &lt;!&ndash; 轮播图 &ndash;&gt;
                            <el-carousel :interval="5000">
                                <el-carousel-item>
                                    <img src="/static/img/a.png" alt="图片1" style="width: 100%">
                                </el-carousel-item>
                                <el-carousel-item>
                                    <img src="/static/img/b.png" alt="图片2" style="width: 100%">
                                </el-carousel-item>
                                <el-carousel-item>
                                    <img src="/static/img/c.png" alt="图片3" style="width: 100%">
                                </el-carousel-item>
                            </el-carousel>

                            &lt;!&ndash; 轮播图下方模块 &ndash;&gt;
                            <div style="padding: 20px; background-color: #f0f0f0;">
                                &lt;!&ndash; 在这里添加轮播图下方模块的内容 &ndash;&gt;
                                &lt;!&ndash; 示例内容：模块内容放在这里 &ndash;&gt;
                            </div>
                        </el-col>
                        &lt;!&ndash; 右边占四分之一 &ndash;&gt;
                        <el-col :span="6">
                            &lt;!&ndash; 右边板块的内容 &ndash;&gt;
                            &lt;!&ndash; 示例内容：右边板块内容放在这里 &ndash;&gt;
                        </el-col>
                    </el-row>
                </div>-->
                <div v-show="selectedDoctorIndex === '2'" style="width: 100%;">
                    <h2>医生信息</h2>
                    <div class="table-header">
                        <div class="search-container">
                            <div class="search-input">
                                <el-input v-model="searchNo" placeholder="请输入工号"></el-input>
                            </div>
                            <div class="search-input">
                                <el-input v-model="searchName" placeholder="请输入姓名"></el-input>
                            </div>
                            <el-button type="primary" @click="searchDoctors">查询</el-button>
                        </div>
                    </div>

                    <!--渲染数据到前端页面的表格-->
                    <el-table
                            stripe
                            ref="multipleTable"
                            :data="tableDoctorData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            fit

                    >

                        <el-table-column prop="no" label="工号" align="center"></el-table-column>
                        <el-table-column prop="nickName" label="姓名" align="center"></el-table-column>
                        <el-table-column prop="gender" label="性别" align="center">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.gender === 0 ? '' : 'success'">
                                    {{ scope.row.gender === 0 ? '男' : '女' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="deptname" label="科室" align="center"></el-table-column>

                       <!-- <el-table-column prop="birthday" label="生日" align="center">
                            <template slot-scope="scope">{{ scope.row.birthday }}</template>
                        </el-table-column>-->

                        <el-table-column prop="phone" label="电话" align="center"></el-table-column>

                      <!--  <el-table-column prop="email" label="邮箱"  align="center"></el-table-column>
                        <el-table-column prop="degree" label="学历" align="center">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.degree === 0 ? '' : 'success'">
                                    {{ scope.row.degree === 0 ? '本科' : '硕士' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="joinTime" width="100px" label="入职时间"  align="center">
                            <template slot-scope="scope">{{ scope.row.joinTime }}</template>
                        </el-table-column>
                        <el-table-column prop="updateTime" width="100px" label="更新时间"  align="center">
                            <template slot-scope="scope">{{ scope.row.updateTime }}</template>
                        </el-table-column>-->

                    </el-table>
                    <div class="block" style=" float: right;margin-top: 20px">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>

                </div>

                <div v-show="selectedDoctorIndex === '3'" style="width: 100%">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-card class="chart-card" v-show="showDeptCard">
                                <div style="height: 820px;">
                                    <h1>科室</h1>
                                    <el-divider></el-divider>
                                    <div class="table-header">

                                        <div class="search-container">
                                            <div class="search-input">
                                                <el-input v-model="searchDeptName" placeholder="请输入科室名称"></el-input>
                                            </div>
                                            <el-button type="primary" @click="searchDepts">查询</el-button>
                                        </div>
                                    </div>

                                    <el-table
                                            :data="tableDeptData"
                                            stripe
                                            style="width: 100%"
                                          >

                                        <el-table-column prop="deptname" label="科室名称" width="180"></el-table-column>
                                        <el-table-column prop="deptremark" label="科室简介"></el-table-column>
                                        <el-table-column label="操作" width="300" align="center">
                                            <template slot-scope="scope"><!--scope.row.id获取当前行的id属性数据-->

                                                <el-button type="text" size="mini" class="doctor-button" @click="selectDeptByIdFindDoctor(scope.row.id)">
                                                    <i class="el-icon-user" style="font-size: 16px;"></i>
                                                    <span style="font-size: 14px;">医生</span>
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <!--分页组件-->
                                    <div class="block" style=" float: right;margin-top: 20px">
                                        <el-pagination
                                                @size-change="handleSizeChangeDept"
                                                @current-change="handleCurrentChangeDept"
                                                :current-page="currentPageDept"
                                                :page-sizes="[5, 10, 15, 20]"
                                                :page-size="100"
                                                layout="total, sizes, prev, pager, next, jumper"
                                                :total="totalDept">
                                        </el-pagination>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-empty description="选择科室,查看医生" v-show="showEmpty" style="padding-top: 200px">
                            <el-col :span="12">
                                <el-row :gutter="20">
                                    <el-col :span="24">
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-empty>
                        <el-col :span="12" v-loading="loading" element-loading-text="拼命加载中">
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-card class="chart-card" v-show="showDoctorCard">
                                        <div style="height: 410px;">
                                            <h1>医生</h1>
                                            <el-divider></el-divider>
                                            <div class="search-container">
                                                <div class="search-input">
                                                    <el-input v-model="no" placeholder="请输入工号"></el-input>
                                                </div>
                                                <div class="search-input">
                                                    <el-input v-model="nickName" placeholder="请输入姓名"></el-input>
                                                </div>
                                                <el-button type="primary" @click="findDoctors()">查询</el-button>
                                            </div>
                                            <!--渲染数据到前端页面的表格-->
                                            <el-table
                                                    stripe
                                                    ref="multipleTable"
                                                    :data="ListDoctor"
                                                    tooltip-effect="dark"
                                                    style="width: 100%"
                                                    fit
                                            >
                                                <el-table-column prop="no" label="工号" align="center"></el-table-column>
                                                <el-table-column prop="nickName" label="姓名" align="center"></el-table-column>
                                                <el-table-column prop="gender" label="性别" align="center">
                                                    <template slot-scope="scope">
                                                        <el-tag :type="scope.row.gender === 0 ? '' : 'success'">
                                                            {{ scope.row.gender === 0 ? '男' : '女' }}
                                                        </el-tag>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="phone" label="电话" align="center"></el-table-column>
                                                <el-table-column prop="degree" label="学历" align="center">
                                                    <template slot-scope="scope">
                                                        <el-tag :type="scope.row.degree === 0 ? '' : 'success'">
                                                            {{ scope.row.degree === 0 ? '本科' : '硕士' }}
                                                        </el-tag>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column fixed="right" label="操作" width="100"  align="center">
                                                    <template slot-scope="scope"><!--scope.row.address获取当前行的address属性数据-->
                                                        <el-button type="danger" size="mini" @click="showSchedules(scope.row)">号源</el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            <div class="block" style=" float: right;margin-top: 20px">
                                                <el-pagination
                                                        @size-change="handleSizeChangeDeptAndDoctor"
                                                        @current-change="handleCurrentChangeAndDoctor"
                                                        :current-page="currentPageDeptAndDoctor"
                                                        :page-sizes="[5, 10, 15, 20]"
                                                        :page-size="100"
                                                        layout="total, sizes, prev, pager, next, jumper"
                                                        :total="totalDeptAndDoctor">
                                                </el-pagination>
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-card class="chart-card" v-show="showAppointCard">
                                <div style="height: 820px;">
                                    <div class="header-wrapper">
                                        <div class="left-content">
                                            <h1>【{{currentDoctorName}}】排班</h1>
                                        </div>
                                        <div class="right-content">
                                            <i class="el-icon-back" style="font-size: 16px; color: #409EFF;" @click="goBack">返回</i>
                                        </div>
                                    </div>
                                    <el-divider></el-divider>
                                    <div class="table-header">
                                        <div class="search-container">
                                            <div class="search-input">
                                                <el-date-picker
                                                        v-model="searchDeptAppointDate"
                                                        type="date"
                                                        placeholder="请选择日期">
                                                </el-date-picker>
                                            </div>
                                            <div class="button-container">
                                                <el-button type="primary" @click="showSchedules" class="left-button">查询</el-button>
                                            </div>
                                        </div>
                                    </div>

                                    <el-table
                                            :data="tableAppointData"
                                            stripe
                                            style="width: 100%"
                                           >

                                        </el-table-column>
                                        <el-table-column prop="schedulTime" label="排班日期" width="120px"></el-table-column>
                                        <el-table-column prop="sourceTotal" label="号源总量"></el-table-column>
                                        <el-table-column prop="sourceSurplus" label="剩余号源"></el-table-column>
                                        <el-table-column prop="status" label="状态" align="center">
                                            <template slot-scope="scope">
                                                <el-tag :type="scope.row.status === 0 ? 'info' : 'success'">
                                                    {{ scope.row.status === 0 ? '待发布' : '已发布' }}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" width="300">
                                            <template slot-scope="scope">
                                                <el-button
                                                        v-if="scope.row.status === 1"
                                                        type="text"
                                                        size="mini"
                                                        class="doctor-button"
                                                        @click="selectAppointByIdFindSource(scope.row.id)"
                                                >
                                                    <i class="el-icon-user" style="font-size: 16px;"></i>
                                                    <span style="font-size: 14px;">号源</span>
                                                </el-button>
                                            </template>

                                        </el-table-column>
                                    </el-table>
                                    <!--分页组件-->
                                    <div class="block" style=" float: right;margin-top: 20px">
                                        <el-pagination
                                                @size-change="handleSizeChangeDoctorAppoint"
                                                @current-change="handleCurrentChangeDoctorAppoint"
                                                :current-page="currentPageDeptAndDoctorAppoint"
                                                :page-sizes="[5, 10, 15, 20]"
                                                :page-size="100"
                                                layout="total, sizes, prev, pager, next, jumper"
                                                :total="totalDeptAndDoctorAppoint">
                                        </el-pagination>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-empty description="选择排班日期,查看时间段排班" v-show="showSource" style="padding-top: 200px">
                            <el-col :span="12">
                                <el-row :gutter="20">
                                    <el-col :span="24">
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-empty>
                        <el-col :span="12" v-loading="loadingSource" element-loading-text="拼命加载中">
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <transition name = "slide-fade">
                                        <el-card class="chart-card" v-show="showSourceCard">
                                            <div style="height: 410px;">
                                                <h1>时间段排班</h1>
                                                <el-divider></el-divider>

                                                <!--渲染数据到前端页面的表格-->
                                                <el-table
                                                        stripe
                                                        ref="multipleTable"
                                                        :data="ListSource"
                                                        tooltip-effect="dark"
                                                        style="width: 100%"
                                                        fit
                                                >
                                                    <el-table-column label="时段">
                                                        <template slot-scope="scope">
                                                            <el-tag>{{ scope.row.frameTime }}</el-tag>
                                                            <span>-</span>
                                                            <el-tag>{{ scope.row.endTime }}</el-tag>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column prop="sourceTotal" label="号源总量"></el-table-column>
                                                    <el-table-column prop="sourceSurplus" label="剩余号源"></el-table-column>
                                                </el-table>
                                            </div>
                                        </el-card>
                                    </transition>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <!--增加排班时间段模态框开始-->
                    <el-dialog
                            title="新增排班时段"
                            :visible.sync="dialogSourceVisible"
                            width="35%"
                            @close="resetNewAppoint"
                    >
                        <el-form :model="newSource" :rules="newSourceRules" ref="newSourceForm" label-width="80px">
                            <el-form-item label="排班时间">
                                <template>
                                    <el-time-select
                                            placeholder="起始时间"
                                            v-model="newSource.frameTime"
                                            :picker-options="{
                                                start: '00:00',
                                                step: '00:15',
                                                end: '12:00'
                                            }"
                                            prop="frameTime"
                                    >
                                    </el-time-select>
                                    <el-time-select
                                            placeholder="结束时间"
                                            v-model="newSource.endTime"
                                            :picker-options="{
                                                 start: '00:00',
                                                 step: '00:15',
                                                 end: '12:00',
                                             minTime: newSource.frameTime
                                            }"
                                            prop="endTime"
                                    >
                                    </el-time-select>
                                </template>
                            </el-form-item>
                            <el-form-item label="号源总量" prop="sourceTotal">
                                <el-input v-model="newSource.sourceTotal"></el-input>
                            </el-form-item>
                            <el-form-item label="剩余号源" prop="sourceSurplus">
                                <el-input v-model="newSource.sourceSurplus"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="addSource">提交</el-button>
                                <el-button @click="resetSourceForm">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    <!--增加排班时间段模态框结束-->

                    <!--增加排班模态框开始-->
                    <el-dialog
                            title="新增排班"
                            :visible.sync="dialogAppointVisible"
                            width="30%"
                            @close="resetNewAppoint"
                    >
                        <el-form :model="newAppoint" :rules="newAppointRules" ref="newAppointForm" label-width="80px" label-width="80px">
                            <el-form-item label="排班时间" prop="schedulTime">
                                <el-date-picker
                                        v-model="newAppoint.schedulTime"
                                        type="date"
                                        placeholder="选择日期"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item label="号源总量" prop="sourceTotal">
                                <el-input v-model="newAppoint.sourceTotal"></el-input>
                            </el-form-item>
                            <el-form-item label="剩余号源" prop="sourceSurplus">
                                <el-input v-model="newAppoint.sourceSurplus"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="addAppoint">提交</el-button>
                                <el-button @click="resetAppointForm">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    <!--增加排班模态框结束-->
                    <!--排班编辑模态框开始-->
                    <el-dialog
                            title="编辑排班信息"
                            :visible.sync="editModalAppointVisible"
                            width="30%"
                            @close="resetAppointForm">
                        <el-form :model="editedAppoint" :rules="editAppointRules" ref="editAppointForm" label-width="80px">
                            <el-form-item label="排班日期" prop="schedulTime">
                                <el-date-picker
                                        v-model="editedAppoint.schedulTime"
                                        type="date"
                                        placeholder="选择日期"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item label="号源总量" prop="sourceTotal">
                                <el-input v-model="editedAppoint.sourceTotal"></el-input>
                            </el-form-item>
                            <el-form-item label="剩余号源" prop="sourceSurplus">
                                <el-input v-model="editedAppoint.sourceSurplus"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                                 <el-button @click="editModalAppointVisible = false">取消</el-button>
                                 <el-button type="primary" @click="submitAppointEdit">提交</el-button>
                            </span>
                    </el-dialog>
                    <!--排班模态框结束-->
                    <!--科室编辑模态框开始-->
                    <el-dialog
                            title="编辑科室信息"
                            :visible.sync="editModalDeptVisible"
                            width="30%"
                            @close="resetDeptForm">
                        <el-form :model="editedDept" :rules="editDeptRules" ref="editDeptForm" label-width="80px">
                            <el-form-item label="科室备注" prop="deptremark">
                                <el-input v-model="editedDept.deptremark"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                                 <el-button @click="editModalDeptVisible = false">取消</el-button>
                                 <el-button type="primary" @click="submitDeptEdit">提交</el-button>
                            </span>
                    </el-dialog>
                    <!--科室模态框结束-->
                </div>


                <div v-show="selectedDoctorIndex === '4'" style="width: 100%">
                    <h2>药品信息</h2>
                    <el-divider></el-divider>
                    <div class="table-header">

                        <div class="search-container">
                            <div class="search-input">
                                <el-input v-model="drugNo" placeholder="请输入药品编号"></el-input>
                            </div>
                            <div class="search-input">
                                <el-input v-model="drugName" placeholder="请输入药品名"></el-input>
                            </div>
                            <el-button type="primary" @click="searchDrug">查询</el-button>
                        </div>
                    </div>

                    <!--渲染数据到前端页面的表格-->
                    <el-table
                            stripe
                            :data="tableDrugData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            fit
                    >

                        <el-table-column prop="drugNo" label="编号" align="center"></el-table-column>
                        <el-table-column prop="drugName" label="名称" align="center"></el-table-column>
                        <el-table-column prop="inventory" label="库存" align="center"></el-table-column>
                        <el-table-column prop="unitprice" label="单价" align="center"></el-table-column>
                        <el-table-column prop="unit" label="单位" align="center"></el-table-column>
                        <el-table-column label="用法" width="200"  align="center">
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.row.usage === 1" type="success">口服</el-tag>
                                        <el-tag v-else-if="scope.row.usage === 2" type="warning">外敷</el-tag>
                                        <el-tag v-else-if="scope.row.usage === 3" type="info">注射</el-tag>
                                    </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="功能主治" align="center"></el-table-column>
                    </el-table>
                    <div class="block" style=" float: right;margin-top: 20px">
                        <el-pagination
                                @size-change="handleSizeChangeDrug"
                                @current-change="handleCurrentChangeDrug"
                                :current-page="currentPageDrug"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalDrug">
                        </el-pagination>
                    </div>

                </div>

                <div v-show="selectedDoctorIndex === '5'" style="width: 100%">
                    <h2>预约管理</h2>
                    <el-divider></el-divider>
                    <div class="table-header">
                        <el-button type="danger" @click="deleteBookingSelection">删除</el-button>
                        <div class="search-container">
                            <div class="search-input">
                                <el-input v-model="nickName" placeholder="请输入预约人"></el-input>
                            </div>
                           <!-- <div class="search-input">
                                <el-input v-model="bookDoctorName" placeholder="请输入医生名称"></el-input>
                            </div>-->
                            <el-button type="primary" @click="searchDoctorBooking">查询</el-button>
                        </div>
                    </div>
                    <!--增加模态框开始-->
                    <el-dialog
                            title="新增公告"
                            :visible.sync="dialogBookingVisible"
                            width="30%"
                            @close="resetNewBooking"
                    >
                        <el-form :model="newBooking" :rules="bookingRules" ref="newBookingForm" label-width="80px" label-width="80px">
                            <el-form-item label="就诊日期">
                                <el-date-picker
                                        v-model="newBooking.schedulTime"
                                        type="date"
                                        placeholder="选择日期"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item label="症状描述">
                                <el-input v-model="newBooking.healthStatus"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="addRecord">提交</el-button>
                                <el-button @click="resetBookingForm">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>

                    <!--病历录入-->
                    <el-dialog
                            title="病历录入"
                            :visible.sync="editModalBookingVisible"
                            width="30%"
                            @close="resetBookingForm">
                        <el-form :model="editedBooking" :rules="editBookingRules" ref="editBookingForm" label-width="80px">
                            <el-form-item label="就诊日期" prop="schedulTime">
                                <el-date-picker
                                        v-model="editedBooking.schedulTime"
                                        type="date"
                                        placeholder="选择日期"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item label="症状描述" prop="healthStatus">
                                <el-input v-model="editedBooking.healthStatus"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                                 <el-button @click="editModalBookingVisible = false">取消</el-button>
                                 <el-button type="primary" @click="submitBookingEdit">提交</el-button>
                            </span>
                    </el-dialog>
                    <!--渲染数据到前端页面的表格-->
                    <el-table
                            stripe
                            :data="tableBookingData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            fit
                            @selection-change="handleSelectionChange1"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="schedulTime" label="就诊日期" align="center"></el-table-column>
                        <el-table-column prop="nickName" label="预约人" align="center"></el-table-column>
                        <el-table-column label="时段" width="200">
                            <template slot-scope="scope">
                                <el-tag>{{ scope.row.frameTime }}</el-tag>
                                <span>-</span>
                                <el-tag>{{ scope.row.endTime }}</el-tag>
                            </template>
                        </el-table-column>

                       <!-- <el-table-column prop="deptName" label="科室" align="center"></el-table-column>
                        <el-table-column prop="name" label="医生" align="center"></el-table-column>-->

                        <el-table-column label="状态" width="300">
                            <template slot-scope="scope">
                                    <el-steps :space="200" :active="scope.row.appointmentStatus" :finish-status="scope.row.appointmentStatus === 3 ? 'error' : 'success'" class="custom-steps">
                                        <el-step title="已预约" ></el-step>
                                        <el-step title="已取消" v-if="scope.row.appointmentStatus===3"></el-step>
                                        <el-step title="诊断中" v-if="scope.row.appointmentStatus !== 3" :title="scope.row.appointmentStatus === 2  ? '诊断中' : (scope.row.appointmentStatus !== 2 && scope.row.appointmentStatus !== 4 ? '未诊断' : '诊断中')"></el-step><el-step title="已就诊" v-if="scope.row.appointmentStatus !== 3" :title="scope.row.appointmentStatus === 4 ? '就诊完成' : (scope.row.appointmentStatus === 2 ? '就诊中' : '未就诊')"></el-step>
                                        </el-steps>
                              <!--  <template v-if="scope.row.appointmentStatus === 1">
                                    <el-tag type="info">已预约</el-tag>
                                </template>
                                <template v-else-if="scope.row.appointmentStatus === 2">
                                    <el-tag type="primary">诊断中</el-tag>
                                </template>
                                <template v-else-if="scope.row.appointmentStatus === 3">
                                    <el-tag type="warning">已取消</el-tag>
                                </template>
                                <template v-else-if="scope.row.appointmentStatus === 4">
                                    <el-tag type="success">已就诊</el-tag>
                                </template>-->
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" class="success-button" @click="handleComplete(scope.row.id)">
                                    <i class="el-icon-success" style="font-size: 16px;"></i>
                                    <span style="font-size: 14px;">完成</span>
                                </el-button>
                                <el-button type="text" v-if="scope.row.appointmentStatus !== 2 && scope.row.appointmentStatus !== 3 && scope.row.appointmentStatus !== 4" size="mini" class="recharge-button" @click="speak('就诊', scope.row.id,scope.row.deptName)">
                                    <i class="el-icon-medical" style="font-size: 16px;"></i>
                                    <span style="font-size: 14px;">叫号</span>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block" style=" float: right;margin-top: 20px">
                        <el-pagination
                                @size-change="handleSizeChangeBooking"
                                @current-change="handleCurrentChangeBooking"
                                :current-page="currentPageBooking"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalBooking">
                        </el-pagination>
                    </div>
                </div>

                <div v-show="selectedDoctorIndex === '6'" style="width: 100%">
                    <h2>就诊记录</h2>
                    <el-divider></el-divider>
                    <div class="table-header">
                        <div class="search-container">
                            <div class="search-input">
                                <el-input v-model="RnickName" placeholder="请输入预约人"></el-input>
                            </div>
                            <el-button type="primary" @click="searchDoctorRecord">查询</el-button>
                        </div>
                    </div>

                    <el-dialog
                            title="开方"
                            :visible.sync="editModalRecordVisible"
                            width="30%"
                            @close="resetRecipeForm">
                        <el-form :model="editedRecord" :rules="editRecordRules" ref="editRecordForm" label-width="80px">
                            <el-form-item label="就诊日期" prop="schedulTime">
                                <el-date-picker
                                        v-model="editedRecord.schedulTime"
                                        type="date"
                                        placeholder="选择日期"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item label="检查结果" prop="announcements">
                                <el-input v-model="editedRecord.announcements"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                                 <el-button @click="editModalRecordVisible = false">取消</el-button>
                                 <el-button type="primary" @click="submitRecordEdit">提交</el-button>
                            </span>
                    </el-dialog>

                    <!--渲染数据到前端页面的表格-->
                    <el-table
                            stripe
                            :data="tableRecordData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            fit

                    >

                        <el-table-column prop="schedulTime" label="就诊日期" align="center"></el-table-column>
                        <el-table-column prop="nickName" label="预约人" align="center"></el-table-column>
                        <!--<el-table-column prop="deptName" label="科室" align="center"></el-table-column>
                        <el-table-column prop="doctorName" label="医生" align="center"></el-table-column>-->
                        <el-table-column prop="healthStatus" label="症状描述" align="center"></el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" class="recharge-button" @click="prescribe(scope.row.id)">
                                    <i class="el-icon-document" style="font-size: 16px;"></i>
                                    <span style="font-size: 14px;">开方</span>
                                </el-button>
                                <el-button type="text" size="mini" class="delete-button" @click="deleteRecord(scope.row.id)">
                                    <i class="el-icon-delete" style="font-size: 16px;"></i>
                                    <span style="font-size: 14px;">删除</span>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block" style=" float: right;margin-top: 20px">
                        <el-pagination
                                @size-change="handleSizeChangeRecord"
                                @current-change="handleCurrentChangeRecord"
                                :current-page="currentPageRecord"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalRecord">
                        </el-pagination>
                    </div>
                </div>

                <div v-show="selectedDoctorIndex === '7'" style="width: 100%">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-card class="chart-card" v-show="showRecipeCard">
                                <div style="height: 800px;">
                                    <h2>处方信息</h2>
                                    <el-divider></el-divider>
                                    <div class="table-header">
                                        <el-button type="success" @click="handlePayment">打印清单</el-button>
                                      <!--  <el-dialog
                                                title="支付宝扫码支付"
                                                :visible.sync="dialogVisiblePay"
                                                width="250px"
                                        >
                                            &lt;!&ndash; 二维码容器 &ndash;&gt;
                                            <div class="qrcode-container">
                                                &lt;!&ndash; 二维码包裹器 &ndash;&gt;
                                                <div class="qrcode-wrapper">
                                                    &lt;!&ndash; 显示二维码 &ndash;&gt;
                                                    <div id="qrcode" class="qrcode"></div>
                                                    &lt;!&ndash; 显示透明白色背景 &ndash;&gt;
                                                    <div v-if="paySucc" class="transparent-bg"></div>
                                                    &lt;!&ndash; 当支付成功时显示成功提示信息 &ndash;&gt;
                                                    <div v-if="paySucc" class="success-message">
                                                        <el-result icon="success" title="支付成功！" class="el-result-inline"></el-result>
                                                    </div>
                                                </div>
                                            </div>
                                        </el-dialog>-->
                                        <div class="search-container">
                                            <div class="search-input">
                                                <el-input v-model="nickName" placeholder="请输入预约人"></el-input>
                                            </div>
                                            <el-button type="primary" @click="searchDoctorRecipe">查询</el-button>
                                        </div>
                                    </div>
                                    <!--渲染数据到前端页面的表格-->
                                    <el-table
                                            stripe
                                            fixed
                                            :data="tableRecipeData"
                                            tooltip-effect="dark"
                                            style="width: 100%"
                                            fit
                                            @selection-change="handleSelectionChange1"
                                    >
                                        <el-table-column type="selection" width="55"></el-table-column>
                                        <el-table-column prop="schedulTime" label="就诊日期" align="center" width="100"></el-table-column>
                                        <el-table-column prop="nickName" label="就诊人" align="center"></el-table-column>
                                       <!-- <el-table-column prop="doctorName" label="医生" align="center"></el-table-column>-->
                                        <el-table-column prop="totalmoney" label="总金额" align="center"></el-table-column>
                                        <el-table-column prop="status" label="状态" align="center">
                                            <template slot-scope="scope">
                                                <el-tag :type="scope.row.status === 0 ? '' : 'success'">
                                                    {{ scope.row.status === 0 ? '未缴费' : '已缴费' }}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="announcements" label="检查结果" width="250"></el-table-column>
                                        <el-table-column label="操作" width="160" fixed="right">
                                            <template slot-scope="scope">
                                                <el-button type="text" size="mini" class="recharge-button" @click="queryOpenDrug(scope.row.id)">
                                                    <i class="el-icon-setting" style="font-size: 16px;"></i>
                                                    <span style="font-size: 14px;">配药</span>
                                                </el-button>
                                              <!--  <el-button type="text" size="mini" class="delete-button">
                                                    <i class="el-icon-delete" style="font-size: 16px;"></i>
                                                    <span style="font-size: 14px;">删除</span>
                                                </el-button>-->
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <div class="block" style=" float: right;margin-top: 20px">
                                        <el-pagination
                                                @size-change="handleSizeChangeRecipe"
                                                @current-change="handleCurrentChangeRecipe"
                                                :current-page="currentPageRecipe"
                                                :page-sizes="[5, 10, 15, 20]"
                                                :page-size="100"
                                                layout="total, sizes, prev, pager, next, jumper"
                                                :total="totalRecipe">
                                        </el-pagination>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-empty description="选择配药,给该患者开药" v-show="showOpenDrug" style="padding-top: 200px">
                            <el-col :span="12">
                                <el-row :gutter="20">
                                    <el-col :span="24">
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-empty>
                        <el-col :span="12" v-loading="loading" element-loading-text="拼命加载中">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-card class="chart-card" v-show="showDureCard">
                                    <div style="height: 410px;">
                                        <h2>药品信息</h2>
                                        <el-divider></el-divider>
                                        <div class="search-container">
                                            <el-button type="primary" @click="kAddDrug" v-if="statusa!==1">开药</el-button>
                                        </div>
                                        <!--渲染数据到前端页面的表格-->
                                        <el-table
                                                stripe
                                                ref="multipleTable"
                                                :data="durgList"
                                                tooltip-effect="dark"
                                                style="width: 100%"
                                                fit
                                        >
                                            <el-table-column prop="drugNo" label="药品编号" align="center" width="200"></el-table-column>
                                            <el-table-column prop="drugName" label="药品名称" align="center" width="200"></el-table-column>
                                            <el-table-column prop="unitprice" label="单价" align="center"></el-table-column>
                                            <el-table-column prop="number" label="数量" align="center"></el-table-column>
                                            <el-table-column prop="unit" label="单位" align="center"></el-table-column>
                                            <el-table-column fixed="right" label="操作" width="150"  align="center" v-if="statusa!==1">
                                                <template slot-scope="scope"><!--scope.row.address获取当前行的address属性数据-->
                                                    <el-button type="danger" size="mini" @click="deleteDrug(scope.row.id)" v-if="statusa!==1">删除</el-button>
                                                    <el-button type="primary" size="mini" @click="editedOpenDrugById(scope.row.id)" v-if="statusa!==1">编辑</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                        <div class="block" style=" float: right;margin-top: 20px">
                                            <el-pagination
                                                    @size-change="handleSizeChangeOpenDrug"
                                                    @current-change="handleCurrentChangeOpenDrug"
                                                    :current-page="currentPageOpenDrug"
                                                    :page-sizes="[5, 10, 15, 20]"
                                                    :page-size="100"
                                                    layout="total, sizes, prev, pager, next, jumper"
                                                    :total="totalOpenDrug">
                                            </el-pagination>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                        </el-col>
                    </el-row>
                    <!--开药模态框开始-->
                    <el-dialog
                            title="开药"
                            :visible.sync="dialogOpenDrugVisible"
                            width="30%"
                            @close="resetNewOpenDrug"
                    >
                        <el-form :model="newOpenDrug" :rules="newOpenDrugRules" ref="OpenDrugForm" label-width="80px" label-width="80px">
                            <el-form-item label="药品名称" prop="drugName">
                                <el-input v-model="newOpenDrug.drugName"></el-input>
                            </el-form-item>
                            <el-form-item label="药品数量" prop="number">
                                <el-input v-model="newOpenDrug.number"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="addOpenDrug">提交</el-button>
                                <el-button @click="resetOpenDrugForm">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    <!--开药模态框结束-->
                    <!--编辑药品模态框开始-->
                    <el-dialog
                            title="编辑药品数量"
                            :visible.sync="editModalOpenDrugVisible"
                            width="30%"
                            @close="resetOpenDrugForm">
                        <el-form :model="editedOpenDrug" :rules="editOpenDrugRules" ref="editOpenDrugForm" label-width="80px">
                            <el-form-item label="数量" prop="number">
                                <el-input v-model="editedOpenDrug.number"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                                 <el-button @click="editModalOpenDrugVisible = false">取消</el-button>
                                 <el-button type="primary" @click="submitOpenDrugEdit">提交</el-button>
                            </span>
                    </el-dialog>
                    <!--编辑药品模态框结束-->
                </div>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script src="js/html2canvas.min.js"></script>
<script src="js/qrcode.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/index.min.js"></script>
<script src="js/axios.js"></script>
<script src="js/dayjs.min.js"></script>
<script src="js/doctor.js"></script>
</html>
